import { FileUpload } from "@/components/common/FileUpload";
import { dealDataExcept } from "@/utils/common";
import { clearNoNum, clearSuffix } from "@/utils/inupt";
import REGION_DATA from "china-area-data";
import { ref } from "vue";

const priceSuffix = {
  suffix: () => "元"
};

export function useColumns() {
  const provinceSelect = REGION_DATA["86"];
  const feeTableList = ref([]);

  const changeGoodsStatus = row => {
    let goodsStatus = 1;
    if (row.goodsStatus == 1) {
      goodsStatus = 0;
    }
    row.goodsStatus = goodsStatus;
    return false;
  };

  const ruleColumns: TableColumnList = [
    {
      label: "主图",
      prop: "specImageJson",
      width: "120px",
      cellRenderer: ({ row }) => (
        <FileUpload
          v-model={row.specImageJson}
          fileType={["jpg", "jpeg", "png"]}
        />
      )
    },
    {
      label: "规格名称",
      prop: "specName",
      cellRenderer: ({ row }) => (
        <el-input v-model={row.specName} clearable placeholder="请输入" />
      )
    },
    {
      label: "商品进价",
      prop: "buyPrice",
      width: "135px",
      cellRenderer: ({ row }) => (
        <el-input
          v-model={row.buyPrice}
          v-slots={priceSuffix}
          placeholder="请输入"
          clearable
          onInput={$event => (row.buyPrice = clearNoNum($event))}
          onBlur={() => (row.buyPrice = clearSuffix(row.buyPrice))}
        />
      )
    },
    {
      label: "商品条码",
      prop: "barCode",
      width: "135px",
      cellRenderer: ({ row }) => (
        <el-input v-model={row.barCode} clearable placeholder="请输入" />
      )
    },
    {
      label: "辅助条码",
      prop: "inputBraCodeList",
      slot: "inputBraCode"
      // cellRenderer: ({ row }) => (
      //   <el-input v-model={row.inputBraCodeList} placeholder="请输入" />
      // )
    },
    {
      label: "操作",
      fixed: "right",
      width: 115,
      slot: "operation"
    }
  ];

  const brandColumns: TableColumnList = [
    {
      type: "expand",
      slot: "expand",
      width: "50px"
    },
    {
      label: "品牌/门店",
      prop: "brandName",
      cellRenderer: ({ row }) => (
        <div style="color: #000;font-weight: bold;">{row.brandName}</div>
      )
    },
    {
      label: "上架状态",
      width: "90px",
      prop: "goodsStatus",
      cellRenderer: ({ row }) => (
        <el-switch
          v-model={row.goodsStatus}
          active-value={1}
          inactive-value={0}
          inline-prompt
          beforeChange={() => changeGoodsStatus(row)}
        />
      )
    },
    {
      label: "门店进价(元)",
      width: "135px",
      prop: "storeBuyPrice",
      cellRenderer: ({ row }) => (
        <el-input
          v-model={row.storeBuyPrice}
          v-slots={priceSuffix}
          clearable
          placeholder="请输入"
          onInput={$event => (row.storeBuyPrice = clearNoNum($event))}
          onBlur={() => (row.storeBuyPrice = clearSuffix(row.storeBuyPrice))}
        />
      )
    },
    {
      label: "零售(元)",
      width: "135px",
      prop: "storeSalePrice",
      cellRenderer: ({ row }) => (
        <el-input
          v-model={row.storeSalePrice}
          v-slots={priceSuffix}
          clearable
          placeholder="请输入"
          onInput={$event => (row.storeSalePrice = clearNoNum($event))}
          onBlur={() => (row.storeSalePrice = clearSuffix(row.storeSalePrice))}
        />
      )
    },
    {
      label: "积分",
      width: "125px",
      prop: "score",
      cellRenderer: ({ row }) => (
        <el-input
          v-model={row.score}
          clearable
          placeholder="请输入"
          onInput={$event => (row.score = clearNoNum($event))}
          onBlur={() => (row.score = clearSuffix(row.score))}
        />
      )
    },
    {
      label: "折扣售价(元)",
      width: "135px",
      prop: "discountSalePrice",
      cellRenderer: ({ row }) => (
        <el-input
          v-model={row.discountSalePrice}
          v-slots={priceSuffix}
          clearable
          placeholder="请输入"
          onInput={$event => (row.discountSalePrice = clearNoNum($event))}
          onBlur={() =>
            (row.discountSalePrice = clearSuffix(row.discountSalePrice))
          }
        />
      )
    },
    {
      label: "折扣积分",
      width: "125px",
      prop: "discountScore",
      cellRenderer: ({ row }) => (
        <el-input
          v-model={row.discountScore}
          clearable
          placeholder="请输入"
          onInput={$event => (row.discountScore = clearNoNum($event))}
          onBlur={() => (row.discountScore = clearSuffix(row.discountScore))}
        />
      )
    }
  ];

  const feeColumns: TableColumnList = [
    {
      label: "省份",
      prop: "province",
      cellRenderer: ({ row }) => (
        <el-select v-model={row.province} clearable placeholder="请选择">
          {Object.keys(provinceSelect).map(key => {
            return (
              <el-option
                key={key}
                label={provinceSelect[key]}
                value={provinceSelect[key]}
              />
            );
          })}
        </el-select>
      )
    },
    {
      label: "运费积分",
      prop: "fareScore",
      cellRenderer: ({ row }) => (
        <el-input
          v-model={row.fareScore}
          placeholder="请输入"
          clearable
          onInput={$event => (row.fareScore = clearNoNum($event))}
          onBlur={() => (row.fareScore = clearSuffix(row.fareScore))}
        />
      )
    },
    {
      label: "运费金额(元)",
      prop: "farePrice",
      cellRenderer: ({ row }) => (
        <el-input
          v-model={row.farePrice}
          v-slots={priceSuffix}
          placeholder="请输入"
          clearable
          onInput={$event => (row.farePrice = clearNoNum($event))}
          onBlur={() => (row.farePrice = clearSuffix(row.farePrice))}
        />
      )
    },
    {
      label: "操作",
      fixed: "right",
      width: 90,
      slot: "operation"
    }
  ];

  const showFeeColumns: TableColumnList = [
    {
      label: "省份",
      prop: "province"
    },
    {
      label: "运费积分",
      prop: "fareScore",
      formatter: ({ fareScore }) => dealDataExcept(fareScore)
    },
    {
      label: "运费金额(元)",
      prop: "farePrice",
      formatter: ({ farePrice }) => dealDataExcept(farePrice)
    }
  ];

  const showBrandColumns: TableColumnList = [
    {
      type: "expand",
      slot: "expand",
      width: "50px"
    },
    {
      label: "品牌/门店",
      prop: "brandName"
    },
    {
      label: "上架状态",
      minWidth: "110px",
      prop: "goodsStatus",
      cellRenderer: ({ row }) => (
        <>
          {row.goodsStatus == 1 ? (
            <el-tag type="primary">已上架</el-tag>
          ) : (
            <el-tag type="danger">未上架</el-tag>
          )}
        </>
      )
    },
    {
      label: "门店进价(元)",
      minWidth: "125px",
      prop: "storeBuyPrice"
    },
    {
      label: "零售(元)",
      minWidth: "125px",
      prop: "storeSalePrice"
    },
    {
      label: "积分",
      minWidth: "125px",
      prop: "score"
    },
    {
      label: "折扣售价(元)",
      minWidth: "125px",
      prop: "discountSalePrice"
    },
    {
      label: "折扣积分",
      minWidth: "125px",
      prop: "discountScore"
    }
  ];

  return {
    ruleColumns,
    feeColumns,
    brandColumns,
    feeTableList,
    showFeeColumns,
    showBrandColumns
  };
}
